<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="stripes" uri="http://stripes.sourceforge.net/stripes.tld" %>
<% request.getRequestDispatcher("/fb/friends.jsp").forward(request, response); %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>My photos on GEA</title>
    <link rel="stylesheet" href="css/ajaxfileupload.css"/>
    <link rel="stylesheet" href="css/jqModal.css"/>
    
    <style type="text/css">
    
    #folderList {
        margin: 20px;
        padding: 10px;
        text-align: center;
    }
    .folder {
        float: left;
        margin: 10px;
        width: 150px;
        height: 150px;
        border: 1px solid;
    }
    .folderHover {
        cursor: pointer;
        background: #FFF;
        color: #F2683E;
        opacity : 0.5;
    }
    
    #loggedIn, #loggedOut {
        display: none;
    }
    
    </style>
    
    <jsp:include page="common.jsp"/>
    
    <script type="text/javascript" src="js/ajaxfileupload.js"></script>
    <script type="text/javascript" src="js/jqModal.js"></script>
    
    <script type="text/javascript">		
    $(document).ready(function() {
        $('#newPhotoForm').jqm();
        $('#newFolderForm').jqm();
        
		listFolder2();
		//securityCheck();
    });
    </script>
  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>
    <div id="body">
        <div id="header">
            <h1>My photos on App Engine!</h1>
            <div id="menu">
                <!-- 
                Folder : <select name="folder" id="filteredFolder"></select> <button onclick="findPhotosByFolder();">Filter</button>
                 -->
                <div id="loggedIn">
	                <button onclick="showNewPhotoForm();" id="newPhotoButton">New photo</button>
	                <button onclick="deleteAllPhotos();" id="deletePhotosButton">Delete all photos</button>
	                <button onclick="showNewFolderForm();" id="newFolderButton">New Folder</button>
	                <button onclick="deleteAllFolders();" id="deleteFoldersButton">Delete all folders</button>
                </div>
                <div id="loggedOut"></div>
            </div>
	    </div>
	    
	    <div>
	       <div id="folderList"></div>
	    </div>
	    
	    <div id="footer"></div>
    </div>
    
    
    <div id="newPhotoForm" class="jqmWindow">
        <form action="photo" onsubmit="savePhoto();return false;" id="form" method="post" enctype="multipart/form-data">
            <input type="hidden" name="save"/>
            <div>
                 Name : <input type="text" name="photo.name" id="photo_name" value=""/>
            </div>
            <div>
                Folder : <select  name="photo.folder" id="photo_folder"></select> <a href="#" onclick="showNewFolderForm(); return false;">New Folder</a>
            </div>
            <div>
                 File : <input type="file" name="photoFile" id="photoFile"/>
            </div>
            <input type="submit" value="Save"/>
        </form>
    </div>
    <div id="newFolderForm" class="jqmWindow">
        <form action="folder" id="folderForm" onsubmit="saveNewFolder();return false;">
            <fieldset>
            <legend>New Folder Form</legend>
            <div>
                Name : <input type="text" name="name" id="folder_name"/> <input type="submit" value="Save"/>
            </div>
            </fieldset>
        </form>
    </div>       
    <div id="loading" style="display: none; position: absolute; top: 0;right: 0"><img src="image/loading.gif"/></div>
    </div>
  </body>
</html>
